<template>
  <!--转增页面-->
  <div class="ziliao zhuanzeng">
    <p class="way">转赠方式</p>
    <wv-tabs type="card" v-model="activeIndex" @click="getActiveIndex()">
      <wv-tab title="短信">
        <wv-group title="接收人手机号">
          <wv-input placeholder="请输入手机号" type="number" v-model="givevipcard.receivePhone" :maxlength="11"></wv-input>
        </wv-group>
      </wv-tab>
      <wv-tab title="微信">
        <wv-group title="备注">
          <wv-textarea placeholder="请输入备注" :rows="6" show-counter max-length="500" v-model="givevipcard.remark"></wv-textarea>
        </wv-group>
      </wv-tab>
    </wv-tabs>
    <p class="des" style="margin-top: 20px">转赠说明</p>
    <p class="descontent" v-if="activeIndex==0">您已选择短信方式转赠，礼品卡激活码将以短信形式通知获赠方</p>
    <p class="descontent" v-if="activeIndex==1">您已选择微信方式转赠，点击下方“转赠”按钮后，再点击右上角“...”分享给亲朋好友</p>
    <p class="offer" @click="goGive(givevipcard)">转赠</p>
  </div>
</template>

<script type="text/ecmascript-6">
  import {giveGiftcard} from '../../../../test/unit/http'
  import {Toast} from 'we-vue'

  export default {
    name: 'zhuanzeng',
    props: {},
    data() {
      return {
        activeIndex: 0,
        givevipcard: {}
      };
    },
    methods: {
      checkFrom(givevipcard) {
        let msg = {};
        let myUtils = this.$myUtils;
        if (this.activeIndex == 0) {
          if (myUtils.isNull(givevipcard.receivePhone)) {
            msg['result'] = false;
            msg['info'] = '请输入接收人手机号';
            return msg;
          }
          if (!myUtils.checkMobile(givevipcard.receivePhone)) {
            msg['result'] = false;
            msg['info'] = '请输入正确的接收人手机号';
            return msg;
          }
        }
        msg['result'] = true;
        msg['info'] = '校验成功';
        return msg;
      },
      getActiveIndex() {
        console.log(this.activeIndex)
      },
      goGive(givevipcard) {
        let accountGoodsId = this.$route.query.accountGoodsId;
        this.givevipcard['accountGoodsId'] = accountGoodsId;
        let checkResult = this.checkFrom(givevipcard);
        if (!checkResult.result) {
          Toast.text(checkResult.info);
          return;
        }
        let giveWay = this.activeIndex;
        if (giveWay == 0) {
          givevipcard['giveWay'] = giveWay;
          giveGiftcard(givevipcard).then(res => {
            console.log(res);
            if (res.code == 100) {
              Toast.text(res.info);
              this.$router.go(-1);
            }
          })
        }
        if (giveWay == 1) {
          givevipcard['giveWay'] = giveWay;
          giveGiftcard(givevipcard).then(res => {
            console.log(res);
            if (res.code == 100) {
              let givevipcardId=res.object;
              this.$router.push({path: 'jihuo', query: {accountGoodsId: accountGoodsId,givevipcardId:givevipcardId,showShare:true}})
            }
          })
        }
      }
    },
    created() {
    },
    components: {}
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .ziliao {
    padding: 10px 10px 50px 0;
    text-align: left;
  }

  .way {
    color: #2e94f0;
    padding-left: 15px;
    margin-bottom: 10px;
  }

  .beizhu {
    border-top: 1px solid #eee;
  }

  .des {
    padding-left: 15px;
    color: #111;
    font-size: 20px;
  }

  .descontent {
    color: #666;
    font-size: 15px;
    line-height: 25px;
    padding-left: 15px;
    margin-top: 5px;
    padding-bottom: 60px;
  }

  .offer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-image: linear-gradient(to left, #4c92ed, #61beec);
    height: 50px;
    line-height: 50px;
    color: #fff;
  }
</style>
